<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="static/index/index.css">
		<link rel="stylesheet" href="static/index/swiper8/swiper-bundle.css">
		<script src="static/index/swiper8/swiper-bundle.min.js"></script>
		<script src="static/index/js/jquery-3.6.0.min.js"></script>
		<!-- 引入动画 -->
		<link rel="stylesheet" href="static/index/AOS-animations/aos.css">
		<script src="static/index/AOS-animations/aos.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- PC端导航栏开始 -->
			<div class="nav">
				<div class="navLogo"><img src="static/index/img/logoTop.png" alt=""></div>
				<div class="navText">
					<ul>
						{foreach name="nav" item="v"}
						<a href="hongguan/{$v.url}">
							<li>{$v.title}</li>
						</a>
						{/foreach}
					</ul>
				</div>
				<div class="placeholder"></div>
			</div>

			<div class="banner" data-aos="fade-right">
				<div class="swiper">
					<div class="swiper-wrapper">
						{foreach name="banner" item="v"}
						<div class="swiper-slide">
							<img src="{$v.image}"  alt="">
						</div>
						{/foreach}
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="inform" data-aos="fade-left">
				<div class="announciate">
					<div class="announciateVedio">
						<video controls>
							<source src="{$noticeVideo.cover}">
						</video>
						<div class="announciateDetails">
							<div class="announciateTime">
								<p>{$noticeVideo.date}</p>
								<p>{$noticeVideo.day}</p>
							</div>
							<div class="play">视频播放</div>
						</div>
					</div>
					
					<div class="announciateText">
						<div class="announceTitle">
							通知公告
						</div>
						<div class="line"></div>
						<ul class="circle">
							{foreach name="noticeList" item="v"}
							<a href="#">
								<li>
									<div>{$v.createtime}</div>
									<div class="li-t">{$v.title}</div>
								</li>
							</a>
							{/foreach}
						</ul>
					</div>
				</div>
			</div>
			<div class="education" data-aos="fade-right">
				<div class="educationTitle">
					<p>主题教育</p>
					<p>查看更多&gt;</p>
				</div>
				<div class="hold">
					{foreach name="theme" item="v"}
					<div class="holdLeft">
						<img src="static/index/img/classroom.jpg" alt="">
						<p style="color: white">{$v.title}</p>
						<p style="color: white"><img src="static/index/img/zhongse.png" alt="">️{$v.createtime}</p>
						<div class="overlay"></div>
					</div>
					{/foreach}
				</div>
			</div>
			<div class="dynamic" data-aos="fade-left">
				<div class="dynamicTitle">
					<p>工作动态</p>
					<p>查看更多&gt;</p>
				</div>
				<div class="dynamicMain">
					<div class="dynamicAchievement">
						<div class="dynamicAchievementLeft">
							<div class="dynamicTime">
								<p>{$work[0]['day']}</p>
								<p>{$work[0]['date']}</p>
							</div>
							<div class="dynamicDetails">
								<p>{$work[0]['title']}</p>
								<p>{$work[0]['abstract']}</p>
							</div>
						</div>
						<div class="dynamicAchievementRight">
							<div class="dynamicTime">
								<p>{$work[1]['day']}</p>
								<p>{$work[1]['date']}</p>
							</div>
							<div class="dynamicDetails">
								<p>{$work[1]['title']}</p>
								<p>{$work[1]['abstract']}</p>
							</div>
						</div>
						<div class="dynamicAchievementLeft">
							<div class="dynamicTime">
								<p>{$work[2]['day']}</p>
								<p>{$work[2]['date']}</p>
							</div>
							<div class="dynamicDetails">
								<p>{$work[2]['title']}</p>
								<p>{$work[2]['abstract']}</p>
							</div>
						</div>
						<div class="dynamicAchievementRight">
							<div class="dynamicTime">
								<p>{$work[3]['day']}</p>
								<p>{$work[3]['date']}</p>
							</div>
							<div class="dynamicDetails">
								<p>{$work[3]['title']}</p>
								<p>{$work[3]['abstract']}</p>
							</div>
						</div>
					</div>
					<div class="dynamicStyry">
						<img src="{$work_image.image}" alt="">
						<p>{$work_image.title}</p>
					</div>
				</div>
			</div>
			<div class="society" data-aos="zoom-in">
				<div class="societyMain">
					<p class="serve">社会服务</p>
					<div class="societyBox">
						{foreach name="social" item="v"}
						<div class="societyContent">
							<a href="#">
								<img src="static/index/img/partyServe.jpg" alt="">
								<p>{$v.title}</p>
								<p>{$v.date}</p>
								<div class="overlayNext">{$v.abstract}</div>
							</a>
						</div>
						{/foreach}
					</div>
				</div>
			</div>
			<div class="exhibition" data-aos="flip-down">
				<div class="exhibitionText">
					<p>红馆展厅</p>
					<p>查看更多 &gt;</p>
				</div>
				<div class="exhibitionImg">
					<div class="exhibitionImgLeft">
						<div class="exhibitionImgBig">
							<img src="{$show[5]['image']}" alt="">
						</div>
						<div class="exhibitionImgSmall">
							<img src="{$show[4]['image']}" alt="">
							<img src="{$show[0]['image']}" alt="">
						</div>
					</div>
					<div class="exhibitionImgRight">
						<div class="exhibitionImgSmall">
							<img src="{$show[3]['image']}" alt="">
							<img src="{$show[2]['image']}" alt="">
						</div>
						<div class="exhibitionImgBig">
							<img src="{$show[1]['image']}" alt="">
						</div>
					</div>
				</div>
			</div>
			<div class="tail" data-aos="fade-left">
				<ul>
					<a href="#">
						<li>友情链接</li>
						{foreach name="link" item="v"}
						<li><a href="{$v.url}">{$v.title}</a></li>
						{/foreach}
					</a>

				</ul>
			</div>
			<div class="footer" data-aos="fade-right">
				<div class="main">
					<div class="footLogo">
						<img src="static/index/img/logo_white.png" alt="">
					</div>
					<div class="footDetails">
						{foreach name="contact" item="v"}
						<div class="footText">
							<p>{$v.title}</p>
							<p>|</p>
							<p>{$v.contact}</p>
						</div>
						{/foreach}
					</div>
					<div class="footContack" id="weCat">
						<div class="wecat">
							<img src="static/index/img/weCat.png" id="weCat" alt="">
							<p>官方微信</p>
						</div>
						<div class="microvlog" id="vlog">
							<img src="static/index/img/weibo.png" id="vlog" alt="">
							<p>官方微博</p>
						</div>
					</div>
				</div>
				<div class="stop">
					Copyright O山东省城市服务技师学院版权所有
				</div>
			</div>
		</div>
	</body>
	<script>
		// 轮播图开始
		var mySwiper = new Swiper('.swiper', {
			autoplay: {
				delay: 3000,
				stopOnLastSlide: false,
				disableOnInteraction: false,
			},
			effect: 'slide', //图片切换方式淡入
			loop: true, // 循环模式选项
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
				clickable: true, //点击分页器指示点可以切换banner图
			},
			// 如果需要前进后退按钮
			navigation: {
				clickable: true,
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		})
		// 轮播图结束
		$(document).ready(function() {
			$(".holdLeft").hover(function() {
				$(this).find(".overlay").css({
					display: "block"
				})
			}, function() {
				$(this).find(".overlay").css({
					display: "none"
				})
			})
		})

		$('.overlayNext').hide(); // 隐藏样式
		$(document).ready(function() {
			$(".societyContent").hover(function() {
				$(this).find(".overlayNext").css({
					display: "flex"
				})
			}, function() {
				$(this).find(".overlayNext").css({
					display: "none"
				})
			})
		})
		AOS.init({
			duration: 1200,
		})
		//显示隐藏微信和微博
		// $(document).ready(function() {
		//   $('.box').hover(
		//     function() {
		//       $(this).find('img').show();
		//     },
		//     function() {
		//       $(this).find('img').hide();
		//     }
		//   );
		// });
	</script>
</html>